<template>
    <div>
        <div class="title">
            <h1 class="title-text">心理咨询</h1>
        </div>
        <el-menu
                :default-active="$route.path"
                class="el-menu-vertical-demo"
                @open="handleOpen"
                @close="handleClose"
                background-color="#545c64"
                text-color="#fff"
                active-text-color="#ffd04b"
                @select="menuClick"
        >

            <el-menu-item index="/before_main/Personal" >
                <i class="el-icon-setting"></i>
                <span slot="title">个人中心</span>
            </el-menu-item>
            <el-menu-item index="/before_main/Order" >
                <i class="el-icon-setting"></i>
                <span slot="title">我要申报</span>
            </el-menu-item>
            <el-menu-item index="/before_main/Orderlist" >
                <i class="el-icon-setting"></i>
                <span slot="title" >申报列表</span>
            </el-menu-item>
        </el-menu>
    </div>
</template>
<script>
    export default {
        methods: {
            handleOpen(key, keyPath) {

            },
            handleClose(key, keyPath) {

            },
            menuClick(index){
                this.$router.push(index).catch((err) => {});
            },
          
        },
    };
</script>
<style scoped lang="scss">
    ul.el-menu-vertical-demo.el-menu {
        height: 100vh;
    }
    .title {
        font-size: 20px;
        font-weight: 900;
        background-color: #545c64;
        color: #fff;
        .title-text {
            padding: 30px 0 10px 0px;
            text-align: center;
        }
    }
    .el-menu-item {
        min-width: 0px;
    }
</style>
